<template>
  <page-header-wrapper class='index-home'>
    <div class='index-header'>
      <dv-border-box-10 class='header-item'>
        <p>{{ topObject.totalAlarmCount }}台</p>
        <p>设备总数</p>
      </dv-border-box-10>
      <dv-border-box-10 class='header-item'>
        <p>{{ topObject.onlineAlarmCount }}台</p>
        <p>在线设备数</p>
      </dv-border-box-10>
      <dv-border-box-10 class='header-item'>
        <p>{{ topObject.offlineAlarmCount }}台</p>
        <p>离线设备数</p>
      </dv-border-box-10>
      <dv-border-box-10 class='header-item'>
        <p>{{ topObject.cameraCount }}台</p>
        <p>摄像头总数</p>
      </dv-border-box-10>
      <dv-border-box-10 class='header-item'>
        <p>{{ topObject.callCount }}台</p>
        <p>报警设备数</p>
      </dv-border-box-10>
    </div>
    <a-row>
      <a-col :span='18'>
        <div id='myEcharts' ref='myEcharts'
             style='width:calc(100vw - 600px);height:calc(100vh - 350px);display: inline-block'></div>

      </a-col>
      <a-col :span='6'>
        <div style='height:calc(100vh - 350px);color: #fff' class='index-right' v-if='deviceDetailFlag'>
          <h4 style='color: #fff;text-align: center;font-size: 18px'>最新更新时间： {{ deviceDetail.updateTime }}</h4>
          <dv-border-box-12>设备名称: {{ deviceDetail.alarmsName }}</dv-border-box-12>
          <dv-border-box-12>设备地址: {{ address }}</dv-border-box-12>
          <dv-border-box-12>太阳能电压: {{ deviceDetail.chargingVoltage }} V</dv-border-box-12>
          <dv-border-box-12>充电电流: {{ deviceDetail.chargingCurrent }} A</dv-border-box-12>
          <dv-border-box-12>充电功率: {{ deviceDetail.chargingPower }} W</dv-border-box-12>
          <dv-border-box-12>太阳能充电量: {{ deviceDetail.chargingCapacity }} kw/h</dv-border-box-12>
          <dv-border-box-12>电池电压: {{ deviceDetail.dischargeVoltage }} V</dv-border-box-12>
          <dv-border-box-12>放电电流: {{ deviceDetail.dischargeCurrent }} A</dv-border-box-12>
          <dv-border-box-12>放电功率: {{ deviceDetail.dischargePower }} W</dv-border-box-12>
          <dv-border-box-12>环境温度: {{ deviceDetail.ambientTemperature }} °C</dv-border-box-12>
          <dv-border-box-12>LED电压: {{ deviceDetail.ledVoltage }} V</dv-border-box-12>
          <dv-border-box-12>LED电流: {{ deviceDetail.ledCurrent }} A</dv-border-box-12>
          <dv-border-box-12>LED功率: {{ deviceDetail.ledPower }} W</dv-border-box-12>
          <dv-border-box-12>系统温度: {{ deviceDetail.innerTemperature }} °C</dv-border-box-12>
          <dv-border-box-12>路灯电压: {{ deviceDetail.streetlightVoltage }} V</dv-border-box-12>
          <dv-border-box-12>路灯电流: {{ deviceDetail.streetlightCurrent }} A</dv-border-box-12>
          <dv-border-box-12>路灯功率: {{ deviceDetail.streetlightPower }} W</dv-border-box-12>
          <dv-border-box-12>电池容量: {{ deviceDetail.dischargeCapacity }}</dv-border-box-12>
        </div>
      </a-col>
    </a-row>

  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import chinaJson from './china.json'
import { mMapPlace } from './area'
import { roleAllocMenu } from '@/api/system'
import { detailDevice, getHomeData } from '@/api/device'
import { rgba } from 'mockjs2/src/mock/random/color'

export default {
  name: 'Workplace',
  components: {},
  data() {
    return {
      demoArea: null,
      topObject: {
        'totalAlarmCount': 5,
        'offlineAlarmCount': 2,
        'onlineAlarmCount': 3,
        'cameraCount': 0,
        'callCount': 0
      },
      deviceList: [],
      address: '',
      deviceDetail: {
        alarmsName: '',
        ambientTemperature: 0,
        chargingCapacity: 0,
        chargingCurrent: 0,
        chargingPower: 0,
        chargingVoltage: 0,
        dischargeCurrent: 0,
        dischargePower: 0,
        dischargeVoltage: 0,
        innerTemperature: 0,
        ledCurrent: 0,
        ledPower: 0,
        ledVoltage: 0,
        streetlightCurrent: 0,
        streetlightPower: 0,
        streetlightVoltage: 0,
        dischargeCapacity: 0,
        updateTime: ''
      },
      geoCoordMap: {},
      toolTipData: [],
      deviceDetailFlag: true
    }
  },
  computed: {},
  created() {
    // 如果角色出错 就调用这里
    // roleAllocMenu().then(res => {
    //   console.log(res)
    // })
  },
  async mounted() {
    console.log('mMapPlace', mMapPlace)
    await this.initData()

  },
  methods: {
    async initData() {
      const res = await getHomeData()
      console.log('初始化数据', res)
      // {
      //   "alarmId": 63,
      //   "province": "湖南省",
      //   "city": "长沙市",
      //   "address": null,
      //   "longitude": "112.881046",
      //   "latitude": "28.2289"
      // }
      const { alarmsMapList } = res.data
      this.topObject = res.data
      if (res.data.lastAlarms.alarmsData) {
        this.deviceDetail = res.data.lastAlarms.alarmsData
        this.address = res.data.lastAlarms.address
        this.deviceDetail.updateTime = res.data.lastAlarms.updateTime
        this.deviceDetail.alarmsName = res.data.lastAlarms.alarmsName
      }
      let geoCoordMap = {}
      const toolTipData = []
      alarmsMapList.forEach(item => {
        console.log('====>', item)
        if (item.latitude && item.longitude) {
          geoCoordMap[item.alarmsName] = [+item.longitude, +item.latitude]
          toolTipData.push({
            name: item.alarmsName,
            value: item.address || '',
            areas: [item.city || ''],
            alarmId: item.alarmId
          })
        }
      })
      this.geoCoordMap = geoCoordMap
      this.toolTipData = toolTipData
      this.chinaEcharts()
    },
    chinaEcharts() {
      this.$echarts.registerMap('china', chinaJson)
      let myChart = this.$echarts.init(this.$refs.myEcharts)
      var img2 = 'image://'
      var mapName = 'china'
      var data = [
        { name: '北京', value: 5 }
      ]


      var toolTipData = this.toolTipData
      var geoCoordMap = this.geoCoordMap
      console.log(toolTipData, geoCoordMap)

      /*获取地图数据*/
      myChart.showLoading()
      var mapFeatures = this.$echarts.getMap(mapName).geoJson.features
      myChart.hideLoading()
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp
      })

      var convertData = function(data) {
        // console.log('data', data)
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              alarmId: data[i].alarmId,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }

// 柱状体的主干
      function lineData() {
        return toolTipData.map((item) => {
          console.log('item===============', item)
          return {
            coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]
          }
        })
      }

// 柱状体的顶部
      function scatterData() {
        return toolTipData.map((item) => {
          console.log('item', item)
          return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item]
        })
      }

      let option = {
        backgroundColor: '#003366',
        title: {
          show: true,
          text: '全国太阳能分布图',
          x: 'center',
          top: '10',
          textStyle: {
            color: '#fff',
            fontFamily: '等线',
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'none',
          formatter: function(params) {
            if (typeof params.value[2] == 'undefined') {
              var toolTiphtml = ''
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + '：' + toolTipData[i].value
                }
              }
              // console.log(convertData(data))
              return toolTiphtml
            } else {
              var toolTiphtml = ''
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + '：' + toolTipData[i].value
                }
              }

              return toolTiphtml
            }
          },
          backgroundColor: '#fff',
          borderColor: '#333',
          padding: [5, 10],
          textStyle: {
            color: '#333',
            fontSize: '16'
          }
        },
        geo: [{
          layoutCenter: ['50%', '50%'],//位置
          layoutSize: '180%',//大小
          show: true,
          map: mapName,
          roam: true,
          zoom: 0.65,
          aspectScale: 1,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: 'linear',
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
                }],
                global: true // 缺省为 false
              },
              borderColor: '#c0f3fb',
              borderWidth: 1,
              shadowColor: '#8cd3ef',
              shadowOffsetY: 5,
              shadowBlur: 120
            },
            emphasis: {
              areaColor: 'rgba(0,254,233,0.6)'
              // borderWidth: 0
            }
          }
        }],
        series: [
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 1, //长宽比
            zoom: 0.65,
            showLegendSymbol: true,
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '120%'
                }
              },
              emphasis: {
                // show: false,
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'linear',
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
                  }],
                  global: true // 缺省为 false
                },
                borderColor: '#fff',
                borderWidth: 0.2
              }
            },
            layoutCenter: ['50%', '50%'],
            layoutSize: '180%',
            animation: false,
            markPoint: {
              symbol: 'none'
            },
            data: data
          },
          //柱状体的主干
          // {
          //   type: 'lines',
          //   zlevel: 5,
          //   effect: {
          //     show: false,
          //     symbolSize: 5 // 图标大小
          //   },
          //   lineStyle: {
          //     width: 6, // 尾迹线条宽度
          //     color: 'rgba(249, 105, 13, .6)',
          //     opacity: 1, // 尾迹线条透明度
          //     curveness: 0 // 尾迹线条曲直度
          //   },
          //   label: {
          //     show: 0,
          //     position: 'end',
          //     formatter: '245'
          //   },
          //   silent: true,
          //   data: lineData()
          // },
          // 柱状体的顶部
          // {
          //   type: 'scatter',
          //   coordinateSystem: 'geo',
          //   geoIndex: 0,
          //   zlevel: 5,
          //   label: {
          //     normal: {
          //       show: false,
          //       formatter: function(params) {
          //         console.log('params', params)
          //         var name = params.data[2].name
          //         var value = params.data[2].value
          //         // 如果name 和value长度超过20 就截断然后加省略号
          //         console.log(name.length, value.length)
          //         if (name.length > 10) {
          //           name = name.substring(0, 10) + '...'
          //         }
          //         if (value.length > 10) {
          //           value = value.substring(0, 10) + '...'
          //         }
          //         var text = `设备名称：{tline|${name}}\n设备地址：{fline|${value}}`
          //         // var text = `{tline|项目个数} : {fline|${value}}`
          //         return text
          //       },
          //       color: '#fff',
          //       rich: {
          //         fline: {
          //           // padding: [0, 25],
          //           color: '#fff',
          //           fontSize: 14,
          //           fontWeight: 600
          //         },
          //         tline: {
          //           // padding: [0, 27],
          //           color: '#ABF8FF',
          //           fontSize: 12
          //         }
          //       }
          //     },
          //     emphasis: {
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     color: '#00FFF6',
          //     opacity: 1
          //   },
          //   // symbol: rgba(8,56,127, 0.5),
          //   // 图片底图设置大小 随机去5-10之间的数
          //   symbolSize: [10, 10],
          //   symbolOffset: [0, 0],
          //   z: 999,
          //   data: scatterData()
          // },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(toolTipData),
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: 'rgba(39,148,255,0.74)'
              }
            },
            rippleEffect: {
              scale: 3,
              brushType: 'stroke'
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: false,
                color: '#fff',
                distance: 10
              }
            },
            symbol: 'circle',
            symbolSize: [20, 10],
            itemStyle: {
              normal: {
                color: '#16ecff',
                shadowBlur: 5,
                shadowColor: '#16ffff'
              },
              opacity: 1
            },
            zlevel: 3
          }
        ]
      }
      myChart.setOption(option)


      // 监听点击事件
      myChart.on('click', async (e) => {
        // console.log(e)
        if (e.componentSubType === 'effectScatter') {
          // console.log(e.data)
          const res = await detailDevice(e.data.alarmId)

          if (res.data.alarmsData) {
            this.deviceDetail = res.data.alarmsData
            this.address = res.data.address
          } else {
            this.deviceDetail = {
              ambientTemperature: 0,
              chargingCapacity: 0,
              chargingCurrent: 0,
              chargingPower: 0,
              chargingVoltage: 0,
              dischargeCurrent: 0,
              dischargePower: 0,
              dischargeVoltage: 0,
              innerTemperature: 0,
              ledCurrent: 0,
              ledPower: 0,
              ledVoltage: 0,
              streetlightCurrent: 0,
              streetlightPower: 0,
              streetlightVoltage: 0,
              dischargeCapacity: 0,
              updateTime: ''
            }
          }
          this.deviceDetail.updateTime = res.data.updateTime
          this.deviceDetail.alarmsName = res.data.alarmsName
          console.log('详情', this.deviceDetail)
          this.deviceDetailFlag = false
          this.$nextTick(() => {
            this.deviceDetailFlag = true
          })
        }
      })
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang='less' scoped>
@import './Workplace.less';

/deep/ .ant-pro-page-header-wrap-children-content {
  margin: 0;
}

.index-home {
  height: 91vh;
  background: #003366;
}

.index-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  padding: 15px 0;
}

.header-item {
  display: flex;
  width: 150px;
}

.index-right {
  display: flex;
  flex-direction: column;
}

/deep/ .dv-border-box-12 {
  height: 50px;

  .border-box-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin-left: 20px;
  }
}

/deep/ .dv-border-box-10 .border-box-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.project-list {
  .card-title {
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 12px;
      line-height: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .card-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }

  .project-item {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    height: 20px;
    line-height: 20px;

    a {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
      }
    }

    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
    }
  }

  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.members {
  a {
    display: block;
    margin: 12px 0;
    line-height: 24px;
    height: 24px;

    .member {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 24px;
      max-width: 100px;
      vertical-align: top;
      margin-left: 12px;
      transition: all 0.3s;
      display: inline-block;
    }

    &:hover {
      span {
        color: #1890ff;
      }
    }
  }
}

.mobile {
  .project-list {
    .project-card-grid {
      width: 100%;
    }
  }

  .more-info {
    border: 0;
    padding-top: 16px;
    margin: 16px 0 16px;
  }

  .headerContent .title .welcome-text {
    display: none;
  }
}
</style>
